<template>
  <div
    class="report-list-container"
    ref="reportListPage"
    v-loading.fullscreen.lock="loadingListData"
  >
    <div class="report-list-title-group-container">
      <div v-if="isEdit">
        <div>
          <form @submit.prevent="submit">
            <form-builder :fields="fields" class="create-user-form" ref="form" :value="form" @update="update">
            </form-builder>
          </form>
          <div class="dialog-footer" slot="footer">
            <el-button @click="submit" type="primary" :disabled="pending">保存</el-button>
          </div>
        </div>
      </div>
      <div class="report-view" v-else>
        <div>
          <div class="report-title" >{{form.reportName}}</div>
          <div>
            <el-popover
              placement="top-start"
              trigger="hover"
              :content="form.reportDescribe">
              <div class="report-describe" slot="reference">{{form.reportDescribe}}</div>
            </el-popover>
          </div>
        </div>
        <div class="report-button">
          <base-button type="danger" @event="deleteHandle" v-if="deleteFinance">删除</base-button>
          <base-button type="primary" @event="editHandle" v-if="editFinance">编辑</base-button>
        </div>
      </div>
    </div>
    
    <!--搜索-->
    <div class="report-list-search-group-container">
      <form class="base-search" onsubmit="return false;">
        <div class="report-list-base-search-group">
          <div class="report-dept">
            <biz-team-select multiple collapse :value="tag" @input="chooseTeam" @remove="clearTeam"/>
            <el-select v-model="params.userIds" filterable multiple collapse-tags @change="chooseSearch" clearable placeholder="请选择人员" >
              <el-option
                v-for="item in tagUsers"
                :key="item.userId"
                :label="item.displayName"
                :value="item.userId">
              </el-option>
            </el-select>
          </div>
          <el-date-picker
            v-if="isEdit"
            v-model="statisticsDate"
            type="month"
            value-format="timestamp"
            placeholder="选择月">
          </el-date-picker>
        </div>
      </form>
    </div>

    <!--list start-->
    <div class="report-list-component">
      <div class="operation-bar-container" v-if="!isEdit">
        <div class="top-btn-group">
          <base-button type="primary" @event="exportReport(false)" v-if="isButtonDisplayed">导出</base-button>
          <base-button type="primary" @event="exportReport(true)" v-if="isButtonDisplayed">导出全部</base-button>
        </div>
      </div>

      <div class="base-selection-wrapper">
        <base-selection-bar
          ref="baseSelectionBar"
          v-model="multipleSelection"
          @toggle-selection="toggleSelection"
          @show-panel="() => multipleSelectionPanelShow = true"
        />
      </div>

      <el-table
        v-table-style
        :data="reports"
        stripe
        show-summary
        :height="tableHeight"
        :summary-method="getSummaries"
        :highlight-current-row="false"
        @select="handleSelection"
        @select-all="handleSelection"
        header-row-class-name="report-table-header"
        ref="multipleTable"
        class="report-table"
      >
        <el-table-column type="selection" width="48" align="center" fixed class-name="select-column" v-if="!isEdit"></el-table-column>
        <el-table-column type="index" width="48" align="center" label="序号" fixed ></el-table-column>
        <el-table-column
          v-for="(column, index) in columns"
          v-if="column.show"
          :key="`${column.field}_${index}`"
          :label="column.label"
          :prop="column.field"
          :width="column.width"
          :min-width="column.minWidth || '120px'"
          :align="column.align"
          :fixed="column.fixed"
        >
          <template slot-scope="scope">
            <template v-if="column.field === 'tagName' || column.field === 'userName' || column.field === 'costTotal'">
              <span >{{scope.row[column.field]}}</span>
            </template>
            <template v-else>
              <span v-if="isEdit">
                <el-input-number v-model="scope.row[column.field]" @blur="defaultNumber(scope.row,column.field)" :controls="false" @change="sumCostTotal(scope.row)"></el-input-number>
              </span>
              <span v-else>{{scope.row[column.field]}}</span>
            </template>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-footer">
        <div class="list-info">
          共
          <span class="level-padding">{{reports.length}}</span>记录
          <template v-if="multipleSelection&&multipleSelection.length>0">
            ，已选中
            <span
              class="customer-selected-count"
              @click="multipleSelectionPanelShow = true"
            >{{multipleSelection.length}}</span>条
            <span class="customer-selected-count" @click="toggleSelection()">清空</span>
          </template>
        </div>
      </div>

    </div>
    <!--list end-->

    <!-- start 导出 -->
    <base-export
      ref="exportPanel"
      :columns="exportColumns"
      :build-params="buildExportParams"
      :validate="checkExportCount"
      method="post"
      :action="userReportCustomUserReportUserExport"
    />
    <!-- end 导出 -->

    <base-panel :show.sync="multipleSelectionPanelShow" width="420px">
      <h3 slot="title">
        <span>已选中数据({{multipleSelection.length}})</span>
        <i
          v-if="multipleSelection.length > 0"
          class="iconfont icon-qingkongshanchu customer-panel-btn"
          @click="toggleSelection()"
          title="清空已选中数据"
          data-placement="right"
          v-tooltip
        ></i>
      </h3>

      <div class="report-selected-panel">
        <div class="report-selected-tip" v-if="multipleSelection.length <= 0">
          <img :src="noDataImage" />
          <p>暂无选中的数据，请从列表中选择。</p>
        </div>
        <template v-else>
          <div class="report-selected-list">
            <div class="report-selected-row report-selected-head">
              <span class="report-selected-sn">区域</span>
              <span class="report-selected-name">维修工程师</span>
            </div>
            <div class="report-selected-row" v-for="c in multipleSelection" :key="c.id">
              <span class="report-selected-sn">{{c.tagName}}</span>
              <span class="report-selected-name">{{c.userName}}</span>
              <button
                type="button"
                class="report-selected-delete"
                @click="cancelSelectCustomer(c)"
              >
                <i class="iconfont icon-fe-close"></i>
              </button>
            </div>
          </div>
        </template>
      </div>
    </base-panel>

  </div>
</template>

<script>
import _ from 'lodash';
import { InputNumber} from 'element-ui'
import {getTagUser, getUserByTags, addStatisticsReport, modifyStatisticsReport, getPersonFinance, removeStatisticsReport} from '@src/api/userReportCustom.ts';
import { checkButtonDisplayed } from '@src/util/dom';
import { safeNewDate } from '@src/util/time';

/* export & import */
import { userReportCustomUserReportUserExport } from '@src/api/Export';
// import { eventListImport_1, eventListImportTem_1 } from '@src/api/Import';
import { getOssUrl } from '@src/util/assets'
const noDataImage = getOssUrl('/no_data.png')
export default {
  name: 'report-list-view',
  props: {
    initData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {   
      noDataImage,
      isButtonDisplayed: checkButtonDisplayed(),
      isCreate:false,
      reportId:'',
      isEdit:false,
      pending: false,
      loadingListData: false,
      fields: [{
        formType: 'text',
        fieldName: 'reportName',
        displayName: '报表名称',
        placeholder: '请输入报表名称',
        isNull: 0,
        maxlength:50
      },
      {
        formType: 'textarea',
        fieldName: 'reportDescribe',
        displayName: '描述信息',
        placeholder: '请输入描述信息',
        isNull: 1,
      }],
      params: {
        tagIds:[],
        userIds:[],
      },
      tagUsers:[],
      tag:[],
      statisticsDate: +new Date(), // 统计时间
      form: {
        reportName:'', // 报表名称
        reportDescribe:'' // 报表描述
      },
      // data from remote
      reports: [],
      multipleSelection:[],
      multipleSelectionPanelShow: false,
      columns: this.fixedColumns(),
      userReportCustomUserReportUserExport
    };
  },
  computed: {
    tableHeight(){
      return document.body.clientHeight - 250
    },
    editFinance() {
      return this.initData.editFinance;
    },
    deleteFinance() {
      return this.initData.deleteFinance
    },
    exportColumns() {
      return this.columns.map(c => {
        if(c.field != 'tagName' && c.field != 'userName'){
          c.export = true;
        } 

        return c;
      });
    },
    selectedIds() {
      return this.multipleSelection.map(r => r.id) || [];
    },
    editPermission(){
      return this.initData.isEdit || false
    },
  },
  async mounted() {
    this.isCreate = window.frameElement.getAttribute('data-id') == 'user_create'
    this.reportId = window.frameElement.getAttribute('data-id').split('user_update_')[1] || ''
    this.isEdit = this.isCreate
    this.getUserByTags()
    this.search();
  },
  methods: {
    defaultNumber(row, name){
      if(!row[name]){
        row[name] = 0
      }else{
        row[name] = Number(row[name].toFixed(2))
      }
      this.$set(row, name, row[name])
    },
    // 实时计算合计
    sumCostTotal(row){
      row.costTotal = Number(Number(((row.basicSalary || 0) + (row.socialInsurance || 0) + (row.mealAllowance || 0) + (row.houseAllowance || 0) + (row.carAllowance || 0) + (row.travelAllowance || 0 ) + (row.maintenanceCommission || 0)
      + (row.workHoursCommission || 0) + (row.partChargeCommission || 0) + (row.mileageWithhold || 0) + (row.performanceDeduction || 0) + (row.rewardAmount || 0 ) - (row.penaltyAmount || 0) + (row.partsNcomeUnderWarranty || 0) + (row.partsCostUnderWarranty || 0)
      + (row.agentPartSaleIncome || 0 ) + (row.partInsuredCostAmount || 0) + ( row.paymentBehalf || 0) + (row.hotelExpense || 0 ) + (row.communicationFee || 0) + (row.yuantong || 0 ) + (row.shunfeng || 0 ) + (row.shunxinLogistics || 0) + (row.otherExpress || 0)
      + (row.carMaintenance || 0) + (row.vehicleMaintenance || 0 ) + ( row.vehicleMileageCost || 0) + (row.highCost || 0 ) + (row.roadToll || 0 ) + (row.trafficExpense || 0 ) + (row.parkingRate || 0 ) + (row.vehicleInsurance || 0)
      + (row.vehicleDepreciation || 0))).toFixed(2))
    },
    async clearTeam(value = []){
      this.params.tagIds = [];
      this.tag = []
      await this.getUserByTags()
      await this.search();
    },
    chooseSearch(){
      this.search();
    },
    getUserByTags(){
      getUserByTags({tagIds:this.params.tagIds}).then(res=>{
        if(res.status === 0){
          this.tagUsers = res.data
        }
      })
    },
    async chooseTeam(value){
      this.tag = value
      const ids = []
      value.forEach(item=>{
        ids.push(item.id || item)  
      })
      this.params.tagIds = ids;
      this.params.userIds = []
      await this.getUserByTags()
      await this.search();
    },
    handleSelection(selection) {
      let tv = this.computeSelection(selection);
      let original = this.multipleSelection.filter(ms =>
        this.reports.some(cs => cs.id === ms.id)
      );
      let unSelected = this.reports.filter(c =>
        original.every(oc => oc.id !== c.id)
      );

      if (tv.length > this.selectedLimit) {
        this.$nextTick(() => {
          original.length > 0
            ? unSelected.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row, false);
            })
            : this.$refs.multipleTable.clearSelection();
        });
        return this.$platform.alert(`最多只能选择${this.selectedLimit}条数据`);
      }
      this.multipleSelection = tv;

      this.$refs.baseSelectionBar?.openTooltip();
    },
    computeSelection(selection) {
      let tv = [];
      tv = this.multipleSelection.filter(ms =>
        this.reports.every(c => c.id !== ms.id)
      );
      tv = _.uniqWith([...tv, ...selection], _.isEqual);
      return tv;
    },
    cancelSelectCustomer(report) {
      if (!report || !report.id) return;
      this.multipleSelection = this.multipleSelection.filter(
        ms => ms.id !== report.id
      );
      this.toggleSelection([report]);
    },
    toggleSelection(rows) {
      let isNotOnCurrentPage = false;
      let row = undefined;

      if (rows) {
        for (let i = 0; i < rows.length; i++) {
          row = rows[i];
          isNotOnCurrentPage = this.reports.every(item => {
            return item.id !== row.id;
          });
          if (isNotOnCurrentPage) return;
        }
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
        this.multipleSelection = [];
      }
    },
    async deleteHandle(){
      try {
        let confirm = await this.$platform.confirm('删除后，报表将无法恢复，确认是否删除?');
        if(!confirm) return
        removeStatisticsReport({reportId:this.reportId}).then(res=>{
          if(res.status === 0 && res.succ){
            this.$platform.notification({
              title: '成功',
              message:'删除成功',
              type: 'success',
            });
            let fromId = window.frameElement.getAttribute('fromid')
            this.$platform.refreshTab(fromId)
            this.$platform.closeTab(window.frameElement.dataset.id)
          }
        })
      }catch(e){
        console.error(e);
      }
    },
    editHandle(){
      this.isEdit = true
    },
    buildReportParams(){
      let params = {
        reportStatistics:{
          reportName:this.form.reportName,
          reportDescribe:this.form.reportDescribe,
          // TODO 国际化时间改造 参数确认
          statisticsDate:`${safeNewDate(this.statisticsDate).getFullYear()}年${safeNewDate(this.statisticsDate).getMonth() + 1}月`,
          id:this.reportId || undefined
        },
        basePersonFinanceInfo:this.reports
      }
      return params
    },
    async  submit(){
      try {
        const validateRes = await this.$refs.form.validate();
        if (!validateRes) return;

        this.pending = true;
        const params = this.buildReportParams();
        let result = this.isCreate ? await addStatisticsReport(params) : await modifyStatisticsReport(params) 
        this.pending = false
        if(result.status != 0) {
          return this.$platform.notification({
            title: '失败',
            message: `${this.isCreate ? '新建' : '更新'}失败`,
            type: 'error',
          });
        }
        this.reportId = this.isCreate ? result.message : this.reportId
        this.isCreate = false
        let fromId = window.frameElement.getAttribute('fromid')
        this.$platform.refreshTab(fromId)
        this.search()
     
        this.isEdit = false
      } catch (e) {
        console.error('edit-user-report catch err', e);
      }
    },
    update({field, newValue, oldValue}) {
      let {fieldName, displayName} = field;
      if (this.$appConfig.debug) {
        console.info(`[FormBuilder] => ${displayName}(${fieldName}) : ${JSON.stringify(newValue)}`);
      }

      this.$set(this.form, fieldName, newValue)
    },
    search() {
      this.loadingListData = true;
      if(this.isCreate){
        getTagUser(this.params).then(res=>{
          if(!res.data){
            this.reports = [];
          }else{
            this.reports = res.data
          }
        }).then(() => {
          this.$refs.reportListPage.scrollTop = 0;
          this.loadingListData = false;
        })
          .catch(err => {
            this.loadingListData = false;
            console.error('err', err);
          });
      }else{
        this.params.reportId = this.reportId
        getPersonFinance(this.params).then(res => {
          if (!res.data || !res.data.personFinanceInfos) {
            this.reports = [];
          } else {
            const { personFinanceInfos, reportStatistics } = res.data;
            const statisticsYear = parseInt(reportStatistics.statisticsDate.substring(0, 4)), statisticsMonth = parseInt(reportStatistics.statisticsDate.substring(reportStatistics.statisticsDate.indexOf('年') + 1, reportStatistics.statisticsDate.indexOf('月'))) - 1
            this.form = reportStatistics
            this.reports = personFinanceInfos
            this.statisticsDate = safeNewDate(statisticsYear, statisticsMonth)

          }

          return res;
        }).then(() => {
          this.$refs.reportListPage.scrollTop = 0;
          this.loadingListData = false;
        })
          .catch(err => {
            this.loadingListData = false;
            console.error('err', err);
          });
      }  
    },

    getSummaries(param){
      const { columns, data } = param;
      let sums = [];
      columns.forEach((column, index) => {
        if(!this.isEdit){
          if (index === 0) {
            sums[index] = '合计';
            return;
          }else if(index === 1 || index === 2 || index === 3){
            sums[index] = '';
            return;
          }
        }else{
          if (index === 0) {
            sums[index] = '合计';
            return;
          }else if(index === 1 || index === 2){
            sums[index] = '';
            return;
          }
        }
     
        
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } 
            return prev;
              
          }, 0);
          sums[index] += '';
        } else {
          sums[index] = '';
        }
      });
      sums = sums.map(item=>{
        if(item && item != '合计' && item != '0'){
          item = Number(Number(item).toFixed(2))
        }
        return item
      })
      return sums;
    },

    fixedColumns() {
      return [
        {
          label: '维修工程师',
          field: 'userId',
          show: false,
        },
        {
          label: '区域',
          field: 'tagId',
          show: false,
        },
        {
          label: '区域',
          field: 'tagName',
          show: true,
          fixed: true,
        },
        {
          label: '维修工程师',
          field: 'userName',
          fixed: true,
          show: true,
        },
        {
          label: '基本工资',
          field: 'basicSalary',
          show: true
        },
        {
          label: '社保',
          field: 'socialInsurance',
          show: true
        },
        {
          label: '餐补',
          field: 'mealAllowance',
          show: true
        },
        {
          label: '房补',
          field: 'houseAllowance',
          show: true
        },
        {
          label: '车补',
          field: 'carAllowance',
          show: true
        },
        {
          label: '出差补贴',
          field: 'travelAllowance',
          show: true
        },
        {
          label: '维保提成',
          field: 'maintenanceCommission',
          show: true
        },
        {
          label: '工时提成',
          field: 'workHoursCommission',
          show: true
        },
        {
          label: '配件收费提成',
          field: 'partChargeCommission',
          show: true
        },
        {
          label: '里程扣款',
          field: 'mileageWithhold',
          show: true
        },
        {
          label: '绩效扣款',
          field: 'performanceDeduction',
          show: true
        },
        {
          label: '奖励金额',
          field: 'rewardAmount',
          show: true
        },
        {
          label: '处罚金额',
          field: 'penaltyAmount',
          show: true
        },
        {
          label: '保外维修配件净收入',
          field: 'partsNcomeUnderWarranty',
          show: true
        },
        {
          label: '代理商配件销售净收入',
          field: 'partsCostUnderWarranty',
          show: true
        },
        {
          label: '保外配件成本金额',
          field: 'agentPartSaleIncome',
          show: true
        },
        {
          label: '保内配件成本金额',
          field: 'partInsuredCostAmount',
          show: true
        },
        {
          label: '代付运费',
          field: 'paymentBehalf',
          show: true
        },
        {
          label: '住宿费',
          field: 'hotelExpense',
          show: true
        },
        {
          label: '通讯费',
          field: 'communicationFee',
          show: true
        },
        {
          label: '圆通',
          field: 'yuantong',
          show: true
        },
        {
          label: '顺丰',
          field: 'shunfeng',
          show: true
        },
        {
          label: '顺心物流',
          field: 'shunxinLogistics',
          show: true
        },
        {
          label: '其他快递',
          field: 'otherExpress',
          show: true
        },
        {
          label: '车辆维修',
          field: 'carMaintenance',
          show: true
        },
        {
          label: '车辆保养',
          field: 'vehicleMaintenance',
          show: true
        },
        {
          label: '车辆里程数',
          field: 'vehicleMileage',
          show: true
        },
        {
          label: '车辆里程费用',
          field: 'vehicleMileageCost',
          show: true
        },
        {
          label: '车辆高速费用',
          field: 'highCost',
          show: true
        },
        {
          label: '过路费',
          field: 'roadToll',
          show: true
        },
        {
          label: '交通费',
          field: 'trafficExpense',
          show: true
        },
        {
          label: '停车费',
          field: 'parkingRate',
          show: true
        },
        {
          label: '车辆保险费',
          field: 'vehicleInsurance',
          show: true
        },
        {
          label: '车辆折旧费',
          field: 'vehicleDepreciation',
          show: true
        },
        {
          label: '合计',
          field: 'costTotal',
          show: true
        },
      ];
    },
    /** 构建客户导出参数 */
    buildExportParams(checkedArr, ids) {
      let exportAll = !ids || ids.length == 0;
      return {
        checked: checkedArr.join(','),
        ids:exportAll ? '' : ids.join(','),
        dataTotal:this.reports.length,
        reportId:this.reportId
      };
    },
    /** 导出客户 */
    exportReport(exportAll) {
      let ids = [];
      let fileName = '人员工单数据统计数据.xlsx';
      if (!exportAll) {
        if (!this.multipleSelection.length)
          return this.$platform.alert('请选择要导出的数据');
        ids = this.selectedIds;
      }
      this.$refs.exportPanel.open(ids, fileName);
    },
    /** 检测导出条数 */
    checkExportCount(ids, max) {
      let exportAll = !ids || ids.length == 0;
      return exportAll && this.totalItems > max
        ? '为了保障响应速度，暂不支持超过5000条以上的数据导出，请您分段导出。'
        : null;
    },
  },
  components:{
    elInputNumber:  InputNumber,
  },
};
</script>

<style lang="scss">

html,
body {
  height: 100%;
}

.level-padding {
  padding: 0 5px;
}

.advanced-search-linkman {
  .el-select-dropdown__item {
    height: 50px;
    padding: 5px 20px;
    p {
      margin: 0;
      line-height: 20px;
    }
  }
}

.report-advance-setting .el-dropdown-menu__item {
  width: 80px;
  text-align: center;
}

.report-list-container {
  height: 100%;
  overflow: auto;
  padding: 10px;

  .panel-title {
    font-size: 16px;
    line-height: 60px;
    padding: 0 25px;
    color: rgb(132, 138, 147);
    border-bottom: 1px solid rgb(242, 248, 247);
    font-weight: normal;
    display: flex;
    justify-content: space-between;
    .iconfont:hover {
      cursor: pointer;
    }
  }
}

.report-list-title-group-container{
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 3px;
  padding: 12px 10px;

  .report-view{
    display: flex;
    justify-content: space-between;
    .report-title{
      font-weight: 600;
      font-size:16px ;
      margin-bottom: 5px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      width: 550px;
    }
    .report-describe{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      width: 550px;
    }
    .report-button{
      display: flex;
      align-items: center;
      button{
        margin: 0 5px;
      }
    }
  }
  
  .create-user-form{
    width: 50%;
  }
  .dialog-footer{
    display: flex;
    justify-content: flex-end;
  }
  
}

// search
.report-list-search-group-container {
  .advanced-search-function,
  .base-search {
    background: #fff;
    border-radius: 3px;
  }

  .base-search {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    padding: 12px 10px;

    .report-list-base-search-group {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .report-dept{
        display: flex;
      }

      .el-select{
        width:300px;
        margin-right:10px ;
        .el-input {
            width: 100%;
            input {
                height: 32px;
                line-height: 32px;
                width: 100%;
            }
        }
        .biz-team-select p{
            line-height: 26px;
        }
      }

      .el-input {
        width: 300px;
        margin-right:10px ;
        input {
          height: 32px;
          line-height: 32px;
          width: 100%;
        }
      }

      .el-date-editor {
        margin-right:0px ;
        width:300px !important;
        input{
            width: 100%;
        }
      }

      a {
        line-height: 33px;
      }
    }

    .advanced-search-visible-btn {
      font-size: 14px;
      line-height: 32px;
      color: $color-primary;
      border-color: $color-primary;
      background: #fff;
      padding: 0 13px;
      white-space: nowrap;

      &:hover {
        cursor: pointer;
      }

      .iconfont {
        font-size: 12px;
        font-weight: bolder;
      }
    }
  }

  .advanced-search-form {
    overflow: auto;
    padding: 10px 0 63px 0;
    height: calc(100% - 51px);

    .form-item-container {
    }

    .two-columns {
      display: flex;
      flex-wrap: wrap;
      .el-form-item {
        width: 50%;
      }
    }

    .el-form-item {
      .el-form-item__content,
      .el-select,
      .base-dist-picker,
      .el-cascader,
      .el-date-editor {
        width: 290px;
      }
    }

    .advanced-search-btn-group {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      position: absolute;
      bottom: 0px;
      background: #fff;
      padding: 15px 20px;

      .base-button {
        margin: 0 10px;
      }
    }
  }

  .advanced-search-function {
    margin-top: 10px;
    padding-bottom: 10px;

    h4 {
      border-bottom: 1px solid #f4f4f4;
      padding: 10px;
    }

    .el-row {
      padding: 5px 0;
    }
    .input-label {
      text-align: right;
      line-height: 32px;
      padding-right: 0;
    }
  }
}

// list
.report-list-component {
  padding-top: 10px;
  /*min-height: calc(100% - 100px);*/

  .report-table {
    padding: 10px;

    &:before {
      height: 0;
    }

    .report-table-header th {
      background: #f5f5f5;
      color: $text-color-primary;
      font-weight: normal;
    }

      .view-detail-btn {
        width: 100%;
        color: $color-primary;
      }

    .view-detail-btn {
      color: $color-primary;
    }

    .select-column .el-checkbox {
      position: relative;
      top: 3px;
    }
  }

  .table-footer {
    display: flex;
    justify-content: space-between;
    padding: 0px 10px 10px 10px;
    background: #fff;
    border-radius: 0 0 3px 3px;

    .list-info {
      font-size: 13px;
      line-height: 32px;
      margin: 0;
      color: #767e89;

      .iconfont {
        position: relative;
        top: 1px;
      }
    }

    .el-pagination__jump {
      margin-left: 0;
    }
  }
}

.report-panel-btn {
  float: right;
  cursor: pointer;
  font-size: 14px;
  margin-right: 5px;

  &:hover {
    color: $color-primary;
  }
}

// -------- report selected panel --------
.report-selected-count {
  color: $color-primary;
  padding: 0 3px;
  width: 15px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
}

.report-selected-panel {
  font-size: 14px;
  height: calc(100% - 51px);

  .report-selected-tip {
    padding-top: 80px;

    img {
      display: block;
      width: 160px;
      margin: 0 auto;
    }

    p {
      text-align: center;
      color: $text-color-regular;
      margin: 8px 0 0 0;
      line-height: 20px;
    }
  }

  .report-selected-list {
    height: 100%;
    padding: 10px;
    overflow-y: auto;

    .report-selected-row {
      display: flex;
      flex-flow: row nowrap;
      line-height: 36px;
      border-bottom: 1px solid #ebeef5;
      font-size: 13px;

      &:hover {
        background-color: #f5f7fa;

        .report-selected-delete {
          visibility: visible;
        }
      }
    }

    .report-selected-head {
      background-color: #f0f5f5;
      color: #333;
      font-size: 14px;
    }

    .report-selected-sn {
      padding-left: 10px;
      width: 150px;
      @include text-ellipsis;
    }

    .report-selected-name {
      padding-left: 10px;
      flex: 1;
      @include text-ellipsis;
    }

    .report-selected-delete {
      width: 36px;
    }

    .report-selected-row button.report-selected-delete {
      padding: 0;
      width: 36px;
      height: 36px;
      border: none;
      background-color: transparent;
      outline: none;
      color: #646b78;
      visibility: hidden;

      i {
        font-size: 14px;
      }

      &:hover {
        color: #e84040;
      }
    }
  }
}

// operation
.report-columns-dropdown-menu {
  max-height: 300px;
  overflow: auto;
  .el-dropdown-menu__item {
    padding: 0;
  }
  .el-checkbox {
    width: 100%;
    padding: 5px 15px;
    margin: 0;
  }
}

.operation-bar-container {
  background: #fff;
  border-radius: 3px 3px 0 0;
  display: flex;
  justify-content: flex-end;
  padding: 10px;

  .top-btn-group .base-button {
    margin-right: 5px;
  }

  .action-button-group {
    .base-button {
      margin-left: 5px;
    }
  }

  .el-dropdown-btn {
    padding: 0 15px;
    line-height: 32px;
    display: inline-block;
    background: $color-primary-light-9;
    color: $text-color-primary;
    outline: none;
    margin-left: 5px;
    .iconfont {
      margin-left: 5px;
      font-size: 12px;
    }

    &:hover {
      cursor: pointer;
      color: #fff;
      background: $color-primary;
    }
  }
}

// superscript
.report-name-superscript-td {
  padding: 0 !important;
  & > div {
    height: 43px;
    line-height: 43px !important;
    a {
      display: inline-block;
      height: 43px;
      line-height: 43px;
    }
  }
}
</style>
<style lang="scss" scoped>
    ::v-deep .el-table__fixed{
        margin: 10px;
    }

 
</style>
